<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Neon Admin Panel">
	<meta name="author" content="">
	
	<title>晓辰-实时数据</title>


	<link rel="stylesheet" th:href="@{/css/jquery-ui-1.10.3.custom.min.css}">
	<link rel="stylesheet" th:href="@{/css/entypo.css}">
	<link rel="stylesheet" th:href="@{/css/css.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap.css}">
	<link rel="stylesheet" th:href="@{/css/neon-core.css}">
	<link rel="stylesheet" th:href="@{/css/neon-theme.css}">
	<link rel="stylesheet" th:href="@{/css/neon-forms.css}">
	<link rel="stylesheet" th:href="@{/css/custom.css}">
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	<!--调试版-->
	<script src="/js/datav.map.vue.js"></script>

	<script th:src="@{/js/jquery-1.11.0.min.js}"></script>
	<!--[if lt IE 9]><script src="/js/ie8-responsive-file-warning.js"></script><![endif]-->

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
	<!--引入echarts-->
	<script src='/js/echarts.min.js'></script>
	<script src='/js/echarts-liquidfill.js'></script>



</head>
<body class="page-body  page-fade" data-url="http://sc.chinaz.com">


<!--Css样式-->
<style type="text/css">
<!--	table设置-->
#table-body .table-tr {
	display: none;
}
	/*站点实时监测*/
	.RealTimeMonitoring .monitor{
		font-size: 20px;
		line-height: 25px;
		font-weight: bold;
	}
	#data-container {
		display: none; /* 隐藏div */
	}
	body{
		margin: 0px auto;
		width:100%;
		min-width:1024px;
		max-width:1550px;
		height:100%;
		background-color:white;
	}

	.han{
		width: 110px;
		height: 50px;
		float: left;
	}
	.han p{
		float: left;
		width: 50%;
		height: 100%;
		margin-left: 25%;
		margin-right: 10%;
	}
	.han h2{
		float: left;
		margin-left: 25%;
		margin-right: 10%;
	}
	.page-container{
		width: 100%;
		position: relative;
	}
	.main-content{
		position: absolute;
	}

	.p_han{
		float: left;
		font-weight: bold;
		width: 48%;
	}
	.p_han2{
		float: left;
		font-weight: bold;
		width: 48%;
		text-align: right;
	}
</style>



	<div class="page-container">

		<!--调用可复用代码：侧边栏-->
		<!--传参定义高亮部位，传的谁的参数，哪个位置就显示高亮-->
		<div th:insert="~{commons/common::sidebar(active='index.html')}"></div>
		<div class="main-content">
			<!--调用可复用代码：头部栏-->
			<div th:insert="~{commons/common::topbar}"></div>

			<hr>

			<script type="text/javascript">
			jQuery(document).ready(function($)
			{
				// Sample Toastr Notification
				setTimeout(function()
				{
					var opts = {
						"closeButton": true,
						"debug": false,
						"positionClass": rtl() || public_vars.$pageContainer.hasClass('right-sidebar') ? "toast-top-left" : "toast-top-right",
						"toastClass": "black",
						"onclick": null,
						"showDuration": "300",
						"hideDuration": "1000",
						"timeOut": "5000",
						"extendedTimeOut": "1000",
						"showEasing": "swing",
						"hideEasing": "linear",
						"showMethod": "fadeIn",
						"hideMethod": "fadeOut"
					};

					toastr.success("You have been awarded with 1 year free subscription. Enjoy it!", "Account Subcription Updated", opts);
				}, 3000);


				// Sparkline Charts
				$('.inlinebar').sparkline('html', {type: 'bar', barColor: '#ff6264'} );
				$('.inlinebar-2').sparkline('html', {type: 'bar', barColor: '#445982'} );
				$('.inlinebar-3').sparkline('html', {type: 'bar', barColor: '#00b19d'} );
				$('.inlinebar-4').sparkline('html', {type: 'bar', barColor: '#00b19d'} );
				$('.bar').sparkline([ [1,4], [2, 3], [3, 2], [4, 1] ], { type: 'bar' });
				$('.pie').sparkline('html', {type: 'pie',borderWidth: 0, sliceColors: ['#3d4554', '#ee4749','#00b19d']});
				$('.linechart').sparkline();
				$('.pageviews').sparkline('html', {type: 'bar', height: '30px', barColor: '#ff6264'} );
				$('.uniquevisitors').sparkline('html', {type: 'bar', height: '30px', barColor: '#00b19d'} );

				// Donut Chart
				var donut_chart_demo = $("#donut-chart-demo");

				donut_chart_demo.parent().show();

				var donut_chart = Morris.Donut({
					element: 'donut-chart-demo',
					data: [
						{label: "正常悬浮物浓度", value: 80.00},
						{label: "凝胶类悬浮物浓度", value: 15.00},
						{label: "不正常悬浮物浓度", value: 5.00},
						//{.abel: "低密度脂蛋白", value: 1.59}
					],
					colors: ['#00FF00', '#0000FF', '#FF0000' ,'#000000']
				});

				donut_chart_demo.parent().attr('style', '');



				// Rickshaw
				var seriesData = [ [], [] ];

				var random = new Rickshaw.Fixtures.RandomData(100);

				for (var i = 0; i < 100; i++)
				{
					random.addData(seriesData);
				}

				var graph = new Rickshaw.Graph( {
					element: document.getElementById("rickshaw-chart-demo"),
					height: 150,
					renderer: 'area',
					stroke: false,
					preserve: true,
					series: [{
							color: '#73c8ff',
							data: seriesData[0],
							name: '污水排放量'
						}
					]
				} );

				graph.render();

				var hoverDetail = new Rickshaw.Graph.HoverDetail( {
					graph: graph,
					xFormatter: function(x) {
						return new Date(x * 1000).toString();
					}
				} );

				var legend = new Rickshaw.Graph.Legend( {
					graph: graph,
					element: document.getElementById('rickshaw-legend')
				} );

				var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight( {
					graph: graph,
					legend: legend
				} );

				setInterval( function() {
					random.removeData(seriesData);
					random.addData(seriesData);
					graph.update();

				}, 500 );
			});


			</script>


			<div class="row">
				<!--溶解氧超标率-->
				<div class="col-sm-3">

					<div class="tile-stats tile-white" >
						<div class="icon"><i class="entypo-water"></i></div>
						<!--<div class="num" data-start="0" data-end="7" data-postfix="" data-duration="1500" data-delay="1200">0</div>-->
						<h2>溶解氧超标率（%）</h2>
						<p></p>
						<!--饼图-->
						<div id="waterQuality" style="width: 250px;height:250px;"></div>
						<script type="text/javascript">

							$.getJSON("http://localhost:8086/sewage/getCountBy", function (data) {
								var map = data.data;
								var count1 = map.condition_count
								var total_count1 = map.total_count
								var statusCount1 = (count1*100/total_count1).toFixed(2);
								$("#total_count1").html(map.total_count)
								$("#condition_count1").html(map.condition_count)
								$("#statusCount1").html(statusCount1)
								console.log("Data received: " + map);
								// 在这里调用函数来更新图表数据
								updateChart1(statusCount1);
							});


							function updateChart1(statusCount1) {
								// 基于准备好的dom，初始化echarts实例
								var myChart = echarts.init(document.getElementById('waterQuality'));
								// 指定图表的配置项和数据
								var option = {
									color: ['#55d5a5', '#ffffff'],
									tooltip: {
										trigger: 'item'
									},
									legend: {
										top: '3%',
										left: 'left'
									},
									series: [{
										name: '溶解氧浓度达标',
										type: 'pie',
										radius: ['55%', '75%'],
										// 避免重叠
										avoidLabelOverlap: true,
										itemStyle: {
											borderRadius: 10,
											borderColor: '#fff',
											borderWidth: 2
										},
										// 标签
										label: {
											show: true,
											rotate: 0,
											position: 'center',
											distanceToLabelLine: 50,
											fontSize: '20',

										},
										// 进行强调
										emphasis: {
											label: {
												show: true,
												fontSize: '25',
												fontWeight: 'bold'
											}
										},
										labelLine: {
											show: false
										},
										data: [{
											value: statusCount1,
											name: '溶解氧超标率\n' + statusCount1 + '%'
										},
											{
													value: 100 - statusCount1
											},
										]
									}]
								};
								// 使用刚指定的配置项和数据显示图表。
								myChart.setOption(option);
							}
						</script>

						<div class="han" >
							<h2  align="center"><b id="total_count1"></b></h2>
						</div>
						<div class="han">
							<h2  align="center"><b id="condition_count1"></b></h2>
						</div>
						<br>
						<div class="han" >
							<p >排污数量</p>
						</div>
						<div class="han">
							<p >达标数量</p>
						</div>
					</div>

				</div>
				<!--站点正常率-->
				<div class="col-sm-3">

					<div class="tile-stats tile-white">
						<div class="icon"><i class="entypo-rdio"></i></div>
						<!--<div class="num" data-start="0" data-end="52121" data-postfix="" data-duration="1500" data-delay="0">0&nbsp;</div>-->

						<h2>站点正常率（%）</h2>
						<!--饼图-->
						<div id="device" style="width: 250px;height:250px;"></div>
						<script type="text/javascript">

							// 获取后端数据
							$.getJSON("http://localhost:8086/sewage/getStatusBy", function (data) {
								var map = data.data;
								var count2 = map.condition_count
								var total_count2 = map.total_count
								var statusCount2 = (count2*100/total_count2).toFixed(2);
								$("#total_count2").html(map.total_count)
								$("#condition_count2").html(map.condition_count)
								console.log("Data received: " + map);
								// 在这里调用函数来更新图表数据
								updateChart2(statusCount2);
							});

							function updateChart2(statusCount2) {
								// 基于准备好的dom，初始化echarts实例
								var myChart = echarts.init(document.getElementById('device'));

								// 指定图表的配置项和数据
								var option = {
									color: ['#f08df8', '#ffffff'],
									tooltip: {
										trigger: 'item'
									},
									legend: {
										top: '3%',
										left: 'left'
									},
									series: [
										{
											name: '排污站点正常率',
											type: 'pie',
											radius: ['55%', '75%'],
											// 避免重叠
											avoidLabelOverlap: true,
											itemStyle: {
												borderRadius: 10,
												borderColor: '#fff',
												borderWidth: 2
											},
											// 标签
											label: {
												show: true,
												position: 'center',
												fontSize: '20'
											},
											// 进行强调
											emphasis: {
												label: {
													show: true,
													fontSize: '25',
													fontWeight: 'bold'
												}
											},
											labelLine: {
												show: false
											},
											data: [
												{value: statusCount2,
													name: '站点正常率\n'+ statusCount2 + '%'},
												{value: 100 - statusCount2},
											]
										}
									]
								};

								// 使用刚指定的配置项和数据显示图表。
								myChart.setOption(option);
							}
						</script>


						<div class="han" >
							<h2  align="center"><b id="total_count2"></b></h2>
						</div>
						<div class="han">
							<h2  align="center"><b id="condition_count2"></b></h2>
						</div>
						<br>
						<div class="han" >
							<p >站点总数</p>
						</div>
						<div class="han">
							<p >正常站点</p>
						</div>

					</div>

				</div>
				<!--排污达标率-->
				<div class="col-sm-3">

					<div class="tile-stats tile-white">
						<div class="icon"><i class="entypo-box"></i></div>
						<!--<div class="num" data-start="0" data-end="93" data-postfix="" data-duration="1500" data-delay="0">0&nbsp;</div>-->

						<h2>市排污超标率（%）</h2>
						<!--饼图-->
						<div id="runningDevice" style="width: 250px;height:250px;"></div>
						<script type="text/javascript">

							// 获取后端数据
							$.getJSON("http://localhost:8086/sewage/getStandardBy", function (data) {
								var map = data.data;
								var count3 = map.condition_count
								var total_count3 = map.total_count
								var statusCount3 = (((total_count3-count3)*100)/total_count3).toFixed(2);
								$("#total_count3").html(map.total_count)
								$("#condition_count3").html(map.condition_count)
								console.log("Data received: " + map);
								// 在这里调用函数来更新图表数据
								updateChart3(statusCount3);
							});

							function updateChart3(statusCount3) {
								// 基于准备好的dom，初始化echarts实例
								var myChart = echarts.init(document.getElementById('runningDevice'));

								// 指定图表的配置项和数据
								var option = {
									color: ['#49a2f3', '#ffffff'],
									tooltip: {
										trigger: 'item'
									},
									legend: {
										top: '3%',
										left: 'left'
									},
									series: [
										{
											name: '二级标准排放:浊度<20ntu',
											type: 'pie',
											radius: ['55%', '75%'],
											// 避免重叠
											avoidLabelOverlap: true,
											itemStyle: {
												borderRadius: 10,
												borderColor: '#fff',
												borderWidth: 2
											},
											// 标签
											label: {
												show: true,
												position: 'center',
												fontSize: '20'
											},
											// 进行强调
											emphasis: {
												label: {
													show: true,
													fontSize: '25',
													fontWeight: 'bold'
												}
											},
											labelLine: {
												show: false
											},
											data: [
												{value: statusCount3,
													name: '污水排放超标率\n'+statusCount3+'%'},
												{value: 100-statusCount3},
											]
										}
									]
								};

								// 使用刚指定的配置项和数据显示图表。
								myChart.setOption(option);
							}
						</script>
						<div class="han">
							<h2 align="center"><b id="total_count3"></b></h2>
						</div>
						<div class="han">
							<h2 align="center"><b id="condition_count3"></b></h2>
						</div>


						<div class="han">
							<p >排污数量</p>
						</div>
						<div class="han">
							<p >达标数量</p>
						</div>
					</div>

				</div>
				<!--水球图-->
				<div class="col-sm-3">

					<div class="tile-stats tile-white">
						<div class="icon"><i class="entypo-rdio"></i></div>

						<h2>水质PH平均值</h2>
						<br>


						<div id="WaterPoloDiagram" style="width: 250px;height: 230px">
							<dv-water-level-pond :config="config" style="width:225px;height:225px" />
						</div>
						<script>

							var phCount = 0;

							// 获取后端数据
							$.getJSON("http://localhost:8086/sewage/getPHBy", function (data) {
								var map = data.data;
								var ph = map.average_ph
								phCount = ph.toFixed(2)

								var condition_count4 = map.condition_count
								// app.config.formatter = phCount;
								// var cityCount = map.province_city_count
								// var watershedCount = map.watershed_count
								$("#phs").html(phCount)
								// $("#cityCount").html(cityCount)
								// $("#watershedCount").html(watershedCount)
								$("#condition_count4").html(condition_count4)
								console.log("Data received: " + map);
								// 在这里调用函数来更新图表数据
							});

							var app = new Vue({
								el: '#WaterPoloDiagram',
								data: {
									"config": {
										"data": [45],
										"shape": "round",
										"waveNum": 1,
										/*{value}%*/
										// "formatter": function (value, ph) {
										// 	return value.toFixed(1) + "%" + "\nPH: " + ph;
										// },
										"formatter": "标准水源PH:8~9",
										"waveHeight": 30,
										"colors": ['#00BAFF', '#3DE7C9'],
										"phCount": 0 // 添加 phCount 属性

									}
								}
							})

							Vue.set(app.config, 'phCount', ph);



						</script>



						<div class="han">
							<h2 align="center"><b id="phs"></b></h2>
						</div>
						<div class="han">
							<h2 align="center"><b id="condition_count4"></b></h2>
						</div>


<!--						<div class="han">-->
<!--							<p align="center">来源城市</p>-->
<!--						</div>-->
<!--						<div class="han">-->
<!--							<p align="center">来源流域</p>-->
<!--						</div>-->
						<div class="han">
							<p align="center">平均ph值</p>
						</div>

						<div class="han">
							<p align="center">达标数量</p>
						</div>
					</div>

				</div>

			</div>


			<div class="row">
<!--				污染物情况-->
				<div class="col-sm-6" id="pollution-info-btn" type="button">
					<div class="tile-stats tile-white" style="height:400px;">
						<div class="icon"><i class="entypo-rdio"></i></div>
						<!--<div class="num" data-start="0" data-end="52121" data-postfix="" data-duration="1500" data-delay="0">0&nbsp;</div>-->

						<h2>污染物情况</h2>
						<div id="Cylindrical-Scatter" style="height: 100%">
						</div>


					</div>


				</div>
<!--				设置弹窗1-->
				<div id="data-container" ></div>
<!--				<div id="data-container2"></div>-->
<!--				设置弹窗3-->

<!--				市级排放信息-->
				<div class="col-sm-6">

					<div class="tile-stats tile-white" style="padding: 8%;height:400px;">
						<div class="icon"></div>
						<div id="Histogram1" style="width: 500px;height:360px;margin: 0 2%"></div>
						<script type="text/javascript">

							// 获取后端数据
							$.getJSON("http://localhost:8086/sewage/getProvinceCityCount", function (data) {
								var mapList = data.data;
								// 遍历List<Map<String,Object>>
								var provinceCityList = [];
								var provinceCityCountList = [];
								$.each(mapList, function(index, map) {
									// 已知前面是省会，占了四个字符从索引位置4开始截取
									provinceCityList[index] =  map["Province_City"].substr(4);
									provinceCityCountList[index] = map["province_city_count"];
								});
								// 在这里调用函数来更新图表数据
								updateChart4(provinceCityList,provinceCityCountList);
							});

							function updateChart4(provinceCityList,provinceCityCountList) {
								// 基于准备好的dom，初始化echarts实例
								var myChart = echarts.init(document.getElementById('Histogram1'));

								// 指定图表的配置项和数据
								var option = {
									color: ['#49a2f3'],
									title: {
										text: "市级排放信息"
									},
									xAxis: {
										type: 'category',
										// data: ['解放区', '和信区', '善行区', '芙蓉区', '芙蓉区', '虹口区', '越秀区']
										data: provinceCityList
									},
									grid: {
										right: '3%'
									},
									yAxis: {
										type: 'value'
									},
									series: [
										{
											data: provinceCityCountList,
											type: 'bar',
											showBackground: true,
											backgroundStyle: {
												color: 'rgba(180, 180, 180, 0.2)'
											},
											itemStyle: {
												normal: {
													label: {
														show: true,		//开启显示
														position: 'top',	//在上方显示
														textStyle: {	    //数值样式
															color: 'black',
															fontSize: 16
														}
													}
												}
											}
										}
									]
								};

								// 使用刚指定的配置项和数据显示图表。
								myChart.setOption(option);
							}
						</script>

					</div>
				</div>

			</div>



			<div class="row">

					<!--柱状图-->
				<!--站点实时监测-->
				<div class="col-sm-7">
					<div class="tile-stats tile-white" style="padding:4%;height:340px;">
						<div class="row">
							<div class="col-md-12">
								<div class="RealTimeMonitoring">

									<div class="alert alert-info" role="alert" id="han">
										<p class="monitor">站点实时监测</p>
									</div>

									<table class="table table-bordered " id="water-quality-table">
										<thead>
										<tr class="table-tr">
											<th>站点情况</th>
											<th>监测断面位点</th>
											<th>排污编码</th>
											<th>水温</th>
											<th>电导率(μS/cm)</th>
											<th>监测时间</th>
										</tr>
										</thead>
										<tbody id="table-body">
										</tbody>
									</table>

								</div>
							</div>
						</div>
					</div>



					<link rel="stylesheet" type="text/css" href="slick.css">
					<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


					<script type="text/javascript">

						$.getJSON("http://localhost:8086/sewage/getWaterQualityData", function (data) {
							var waterQualityData = data.data;
							var randomData = waterQualityData.sort(() => Math.random() - 0.5).slice(0, 5);
							console.log(waterQualityData);

							// 清空表格内容
							$('#table-body').empty();

							// 遍历数据并逐行渲染到表格中
							$.each(randomData, function(index, item) {
								// 获取该行每个字段的值
								var statusHtml = '<td><span class="glyphicon ' + (item['siteCondition'] === '正常' ? 'glyphicon-ok' : 'glyphicon-remove') + ' aria-hidden="true"></span></td>';
								var pointHtml = '<td>' + item['sectionPoint'] + '</td>';
								var idHtml = '<td>' + item['Mid'] + '</td>';
								var temperatureHtml = '<td>' + item['waterTemperature'] + '</td>';
								var conductivityHtml = '<td>' + item['Conductivity'] + '</td>';
								var timeHtml = '<td>' + item['monitoringTime'] + '</td>';

								// 创建一行<tr>元素，并将字段的HTML添加到其中
								var row = $('<tr>').append(statusHtml,pointHtml, idHtml, temperatureHtml, conductivityHtml, timeHtml);
								// 将该行<tr>元素加入表格<tbody>中
								$('#table-body').append(row);

							});
						});
					</script>

				</div>

				<!--正常图表-->
				<div class="col-sm-5">

						<div class="tile-stats tile-white" style="padding:4%;height:340px;">
						<div class="icon"></div>
						<h3><b>正常图表</b></h3><br>
						<form class="form-horizontal">
							<div class="alert alert-success" role="alert" style="height: 50px;padding: 10px">
								<p class="p_han" style="padding-left: 20px;font-size: 15px" >站点正常</p>
								<p class="p_han2" style="padding-right: 20px;font-size: 15px" id="site_count"></p>
							</div>
							<div class="alert alert-success" role="alert" style="height: 50px;padding: 10px">
								<p class="p_han" style="padding-left: 20px;font-size: 15px">浊度正常</p>
								<p class="p_han2" style="padding-right: 20px;font-size: 15px"  id="turbidity_count"></p>
							</div>
							<div class="alert alert-success" role="alert" style="height: 50px;padding: 10px">
								<p class="p_han" style="padding-left: 20px;font-size: 15px" >PH正常</p>
								<p class="p_han2" style="padding-right: 20px;font-size: 15px" id="ph_count"></p>
							</div>
							<div class="alert alert-success" role="alert" style="height: 50px;padding: 10px">
								<p class="p_han" style="padding-left: 20px;font-size: 15px">溶解氧正常</p>
								<p class="p_han2" style="padding-right: 20px;font-size: 15px" id="doxygen_count"></p>
							</div>
						</form>
					</div>

				</div>

				<!--	正常图表数据-->
				<script type="text/javascript">
					// 获取后端数据
					$.getJSON("http://localhost:8086/sewage/getNormalBy", function (data) {
						var map = data.data;
						var total_count4 = map.total_count
						var condition_count1 = map.condition_count1
						var condition_count2 = map.condition_count2
						var condition_count3 = map.condition_count3
						var condition_count4 = map.condition_count4

						$("#total_count4").html(total_count4)
						//正常数据
						$("#site_count").html(condition_count1)
						$("#turbidity_count").html(condition_count2)
						$("#ph_count").html(condition_count3)
						$("#doxygen_count").html(condition_count4)
						//异常数据
						$("#site_count2").html(total_count4-condition_count1)
						$("#turbidity_count2").html(total_count4-condition_count2)
						$("#ph_count2").html(total_count4-condition_count3)
						$("#doxygen_count2").html(total_count4-condition_count4)
						console.log("Data received: " + map);
						// 在这里调用函数来更新图表数据

					});

				</script>

			</div>



			<br>




			<script type="text/javascript">
				// Code used to add Todo Tasks
				jQuery(document).ready(function($)
				{
					var $todo_tasks = $("#todo_tasks");

					$todo_tasks.find('input[type="text"]').on('keydown', function(ev)
					{
						if(ev.keyCode == 13)
						{
							ev.preventDefault();

							if($.trim($(this).val()).length)
							{
								var $todo_entry = $('<li><div class="checkbox checkbox-replace color-white"><input type="checkbox" /><label>'+$(this).val()+'</label></div></li>');
								$(this).val('');

								$todo_entry.appendTo($todo_tasks.find('.todo-list'));
								$todo_entry.hide().slideDown('fast');
								replaceCheckboxes();
							}
						}
					});
				});
			</script>
			<!-- Footer -->
			<footer class="main">
				晓辰学技术
			</footer>
		</div>

		<!--聊天框-->
		<div th:insert="~{commons/common::rightbar}"></div>
	</div>




	<link rel="stylesheet" th:href="@{/css/jquery-jvectormap-1.2.2.css}">
	<link rel="stylesheet" th:href="@{/css/rickshaw.min.css}">
<!--	<script src="js/echarts.js"></script>-->
<!--	<script src="js/china.js"></script>-->
	<script src="js/jquery.js"></script>
<!--	<link href="css/bootstrap.css" rel="stylesheet"/>-->
	<!-- Bottom Scripts -->
	<script th:src="@{/js/main-gsap.js}"></script>
	<script th:src="@{/js/jquery-ui-1.10.3.minimal.min.js}"></script>
	<script th:src="@{/js/bootstrap.js}"></script>
	<script th:src="@{/js/joinable.js}"></script>
	<script th:src="@{/js/resizeable.js}"></script>
	<script th:src="@{/js/neon-api.js}"></script>
	<script th:src="@{/js/jquery-jvectormap-1.2.2.min.js}"></script>
	<script th:src="@{/js/jquery-jvectormap-europe-merc-en.js}"></script>
	<script th:src="@{/js/jquery.sparkline.min.js}"></script>
	<script th:src="@{/js/d3.v3.js}"></script>
	<script th:src="@{/js/rickshaw.min.js}"></script>
	<script th:src="@{/js/raphael-min.js}"></script>
	<script th:src="@{/js/morris.min.js}"></script>
	<script th:src="@{/js/toastr.js}"></script>
	<script th:src="@{/js/neon-chat.js}"></script>
	<script th:src="@{/js/neon-custom.js}"></script>
	<script th:src="@{/js/neon-demo.js}"></script>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>


<script type="text/javascript">
/*--------------------全国统计数据-----------------------------*/
$.getJSON("http://localhost:8086/sewage/getDataByMid", function (data) {
var map = data.data
$("#mid").html(map.mid)
$("#waterTemperature").html(map.water_temperature)
$("#turbidity").html(map.turbidity)
$("#dissolvedOxygen").html(map.dissolved_oxygen)
$("#conductivity").html(map.conductivity)
$("#pH").html(map.ph)
})
</script>

<!--柱形-散点-->
<script type="text/javascript">



	// var LightData = [];
	var lightDataHD = [];
	var heavyDataHD = [];
	var normalData = 0;
	var anormalData = 0;
	// const LightData = [];
	// const HeavyDeta = [];
	$.getJSON("http://localhost:8086/sewage/getDissolvedOxygenAndTurbidity", function(data) {

		$.each(data.data, function(index, item) {
			var dissolved_oxygen = item.dissolved_oxygen;
			var turbidity = item.turbidity;

			if (dissolved_oxygen < 15 && turbidity <= 20) {
				lightDataHD.push([dissolved_oxygen, turbidity]);
				normalData = normalData + 1;
			} else {
				heavyDataHD.push([dissolved_oxygen, turbidity]);
				anormalData = anormalData + 1;
			}
		});
		$("#lightDataHD").html(lightDataHD)
		$("#heavyDataHD").html(heavyDataHD)


		//
		var dom = document.getElementById("Cylindrical-Scatter");
		var myChart = echarts.init(dom);
		var app = {};

		var option;

		//数组信息详细获取，可以在div通过id获得
		const LightData = lightDataHD;
		const HeavyDeta = heavyDataHD;


//设置弹窗1
		const pollutionInfoBtn = document.querySelector('#pollution-info-btn');
		let pollutionInfo = "正常溶解氧和水质达标数量:"+normalData+"\n"+"异常数量:"+anormalData ;
		const pollutionInfo1 = pollutionInfo;
		pollutionInfoBtn.onclick = function () {
			// 显示带有标题和内容的弹窗
			window.alert("污染信息提示：\n" + pollutionInfo);
		};


	function calculateAverage(data, dim) {
		let total = 0;
		for (var i = 0; i < data.length; i++) {
			total += data[i][dim];
		}
		return (total /= data.length);
	}
	const scatterOption = (option = {
		xAxis: {
			scale: true
		},
		yAxis: {
			scale: true
		},
		series: [
			{
				type: 'scatter',
				id: '排污超标信息',
				dataGroupId: '排污超标信息',
				universalTransition: {
					enabled: true,
					delay: function (idx, count) {
						return Math.random() * 400;
					}
				},
				data: LightData
			},
			{
				type: 'scatter',
				id: '排污达标信息',
				dataGroupId: '排污达标信息',
				universalTransition: {
					enabled: true,
					delay: function (idx, count) {
						return Math.random() * 400;
					}
				},
				data: HeavyDeta
			}
		]
	});
	const barOption = {
		xAxis: {
			type: 'category',
			data: ['排污超标信息', '排污达标信息']
		},
		yAxis: {},
		series: [
			{
				type: 'bar',
				id: 'total',
				data: [
					{
						value: calculateAverage(HeavyDeta, 0),
						groupId: '排污达标信息'
					},
					{
						value: calculateAverage(LightData, 0),
						groupId: '排污超标信息'
					}
				],
				universalTransition: {
					enabled: true,
					seriesKey: ['排污超标信息', '排污达标信息'],
					delay: function (idx, count) {
						return Math.random() * 400;
					}
				}
			}
		]
	};
	let currentOption = scatterOption;
	setInterval(function () {
		currentOption = currentOption === scatterOption ? barOption : scatterOption;
		myChart.setOption(currentOption, true);
	}, 2000);


	if (option && typeof option === 'object') {
		myChart.setOption(option);
	}
	});


</script>


<!--实时变化直方图-->
<script type="text/javascript">
	var dom = document.getElementById("time_changes");
	var myChart = echarts.init(dom);
	var app = {};

	var option;

	var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples'

	const updateFrequency = 2000;
	const dimension = 0;
	const countryColors = {
		Australia: '#00008b',
		Canada: '#f00',
		China: '#ffde00',
		Cuba: '#002a8f',
		Finland: '#003580',
		France: '#ed2939',
		Germany: '#000',
		Iceland: '#003897',
		India: '#f93',
		Japan: '#bc002d',
		'North Korea': '#024fa2',
		'South Korea': '#000',
		'New Zealand': '#00247d',
		Norway: '#ef2b2d',
		Poland: '#dc143c',
		Russia: '#d52b1e',
		Turkey: '#e30a17',
		'United Kingdom': '#00247d',
		'United States': '#b22234'
	};
	$.when(
			$.getJSON('https://cdn.jsdelivr.net/npm/emoji-flags@1.3.0/data.json'),
			$.getJSON(ROOT_PATH + '/data/asset/data/life-expectancy-table.json')
	).done(function (res0, res1) {
		const flags = res0[0];
		const data = res1[0];
		const years = [];
		for (let i = 0; i < data.length; ++i) {
			if (years.length === 0 || years[years.length - 1] !== data[i][4]) {
				years.push(data[i][4]);
			}
		}
		function getFlag(countryName) {
			if (!countryName) {
				return '';
			}
			return (
					flags.find(function (item) {
						return item.name === countryName;
					}) || {}
			).emoji;
		}
		let startIndex = 10;
		let startYear = years[startIndex];
		option = {
			grid: {
				top: 10,
				bottom: 30,
				left: 150,
				right: 80
			},
			xAxis: {
				max: 'dataMax',
				axisLabel: {
					formatter: function (n) {
						return Math.round(n) + '';
					}
				}
			},
			dataset: {
				source: data.slice(1).filter(function (d) {
					return d[4] === startYear;
				})
			},
			yAxis: {
				type: 'category',
				inverse: true,
				max: 10,
				axisLabel: {
					show: true,
					fontSize: 14,
					formatter: function (value) {
						return value + '{flag|' + getFlag(value) + '}';
					},
					rich: {
						flag: {
							fontSize: 25,
							padding: 5
						}
					}
				},
				animationDuration: 300,
				animationDurationUpdate: 300
			},
			series: [
				{
					realtimeSort: true,
					seriesLayoutBy: 'column',
					type: 'bar',
					itemStyle: {
						color: function (param) {
							return countryColors[param.value[3]] || '#5470c6';
						}
					},
					encode: {
						x: dimension,
						y: 3
					},
					label: {
						show: true,
						precision: 1,
						position: 'right',
						valueAnimation: true,
						fontFamily: 'monospace'
					}
				}
			],
			// Disable init animation.
			animationDuration: 0,
			animationDurationUpdate: updateFrequency,
			animationEasing: 'linear',
			animationEasingUpdate: 'linear',
			graphic: {
				elements: [
					{
						type: 'text',
						right: 160,
						bottom: 60,
						style: {
							text: startYear,
							font: 'bolder 80px monospace',
							fill: 'rgba(100, 100, 100, 0.25)'
						},
						z: 100
					}
				]
			}
		};
		// console.log(option);
		myChart.setOption(option);
		for (let i = startIndex; i < years.length - 1; ++i) {
			(function (i) {
				setTimeout(function () {
					updateYear(years[i + 1]);
				}, (i - startIndex) * updateFrequency);
			})(i);
		}
		function updateYear(year) {
			let source = data.slice(1).filter(function (d) {
				return d[4] === year;
			});
			option.series[0].data = source;
			option.graphic.elements[0].style.text = year;
			myChart.setOption(option);
		}
	});

	if (option && typeof option === 'object') {
		myChart.setOption(option);
	}

</script>

<!--圆圈线-->
<script type="text/javascript">
	var dom = document.getElementById("Circle_line");
	var myChart = echarts.init(dom);
	var app = {};

	var option;

	var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples'

	myChart.showLoading();
	$.getJSON(ROOT_PATH + '/data/asset/data/les-miserables.json', function (graph) {
		myChart.hideLoading();
		graph.nodes.forEach(function (node) {
			node.label = {
				show: node.symbolSize > 30
			};
		});
		option = {
			title: {
				text: 'Les Miserables',
				subtext: 'Circular layout',
				top: 'bottom',
				left: 'right'
			},
			tooltip: {},
			legend: [
				{
					data: graph.categories.map(function (a) {
						return a.name;
					})
				}
			],
			animationDurationUpdate: 1500,
			animationEasingUpdate: 'quinticInOut',
			series: [
				{
					name: 'Les Miserables',
					type: 'graph',
					layout: 'circular',
					circular: {
						rotateLabel: true
					},
					data: graph.nodes,
					links: graph.links,
					categories: graph.categories,
					roam: true,
					label: {
						position: 'right',
						formatter: '{b}'
					},
					lineStyle: {
						color: 'source',
						curveness: 0.3
					}
				}
			]
		};
		myChart.setOption(option);
	});

	if (option && typeof option === 'object') {
		myChart.setOption(option);
	}

</script>

</body>
</html>